1.背景介绍

  媒体查询是针对不同的屏幕尺寸设置不同的样式而出现的，特别是你需要设置设计响应式的页面，媒体查询是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

2.知识剖析

语法

@medin screen and （max-width/min-width）

screen：指的是一种媒体类型：用于电脑屏幕，平板电脑，智能手机等

and：被称为关键词。

max-width/min-width:是一种媒体特性。

3.常见问题&4.解决方案

max-width与min-width的区别

最大宽度“max-width”是媒体特性中最常用的一个特性， 其意思是指媒体类型小于或等于指定的宽度时，样式生效。

最小宽度“min-width”与“max-width”相反， 指的是媒体类型大于或等于指定宽度时，样式生效。

5.编码实战

这段代码的意思是在小于或等于768的分辨率下背景色与boeder的颜色改变

6.拓展思考

max-device-width和max-width的区别

1、max-device-width是设备整个显示区域的宽度，例如，真实的设备屏幕宽度。

2、max-width是目标显示区域的宽度，例如，浏览器宽度。

3、如果使用max-device-width，那么在PC浏览器上浏览网页时，缩小或放大浏览器时是不执行CSS的， 因为“PC设备”没有变化。但如果使用max-width，缩小或放大浏览器时是执行CSS的， 因为“显示区域”即浏览器大小发生了变化。

4、如果使用max-device-width，那么当手机由竖变横时， CSS是不执行的，因为“手机宽度”并没有变化。 如果使用max-width，那么当手机由竖变横时， CSS是执行的，因为“显示区域”发生了变化。

5、通常，面向“移动设备”用户使用max-device-width；面向“PC设备”用户使用max-width。

7.参考文献

1.菜鸟教程

2.媒体查询使用方法@media

3.max-device-width和max-width的区别

8.更多讨论

鸣谢

感谢大家观看

BY : 程一凡